<template>
  <div class="box">
    <van-swipe class="my-swipe" indicator-color="white">
      <van-swipe-item>
        <img src="@/assets/baopin/3333.jpg" alt="" />
      </van-swipe-item>
      <van-swipe-item
        ><img src="@/assets/baopin/2222.jpg" alt=""/>
        </van-swipe-item>
      <van-swipe-item
        ><img src="@/assets/baopin/1111.jpg" alt=""/>
        </van-swipe-item>
      <van-swipe-item
        ><img src="@/assets/baopin/4444.jpg" alt=""/>
       </van-swipe-item>
    </van-swipe>
    <div class="shui">
        <span>国民水果店</span>
        <span>好吃不贵·不好就退</span>
    </div>
    <div class="jgs">
        <p class="jg">￥99</p>
        <p class="zhaijia">【宅家干果组合】腰果+开心果+葡萄干+瓜子 1 份</p>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.box {
  margin-top: 0.35rem;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 0.2rem;
  height: 3.69rem;
  line-height: 1.5rem;
  text-align: center;
}
.my-swipe img {
  width: 100%;
  height: 3.7rem;
}
.shui{
    color: rgb(red, green, blue);
    background: rgb(222,255,234);
    width: 100%;
    height: .35rem;
    line-height: .35rem;
}
.shui span{
    color: rgb(96,165,111);
    text-align: center;
    font-size: .14rem;
    margin-left: .2rem;
}
.shui span:nth-child(1){
    width: .8rem;
    display: inline-block;
    height: .22rem;
    line-height: .22rem;
    border: 1px solid rgb(96,165,111);
    border-radius: .1rem;
}
.jg{
    font-size: 18px;
    color: rgb(245,118,144);
    padding-top: .1rem;
    margin: 0 0 .1rem .1rem;
}
.jgs{
    background: white;
}
.zhaijia{
    font-size: .18rem;
    font-weight: 600;
    margin: 0 .1rem .1rem .1rem;
    padding-bottom: .1rem;
}
</style>